<template>
  <a-modal width="60%" v-model:visible="visible"  :footer="false">
    <div class="ma-content-block lg:flex justify-between p-4">
      <!-- CRUD 组件 -->
      <ma-crud :crud="crud" :columns="columns" ref="crudRef">

        <template #create_time="{ record }">
          {{ tool.dateFormat(record.create_time, 'yyyy-MM-dd hh:mm:ss', '-') }}
        </template>

        <template #probability="{ record }">
          {{ tool.toFixed(record.probability, 4, 10000) }}
        </template>

        <template #img_url="{ record }">
          <a-avatar shape="square">
            <img :src="record.img_url?record.img_url:'/nopic.png'" style="object-fit: cover" />
          </a-avatar>
        </template>

      </ma-crud>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, reactive } from 'vue'
import boxProduct from '@/api/box/boxProduct'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import paymentMember from "@/api/payment/paymentMember";


const crudRef = ref()
const visible = ref(false)
const currentRow = ref({ id: undefined,name: undefined})

const open = (row) => {
  currentRow.value.id= row.id
  crudRef.value.requestData()
  visible.value = true
}

const numberOperation = (newValue, id, numberName) => {
  boxProduct.numberOperation({ id, numberName, numberValue: newValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}

const switchStatus = (statusValue, id, statusName) => {
  boxProduct.changeStatus({ id, statusName, statusValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}


const crud =reactive({
  autoRequest: false,
  bordered:{ wrapper: true, cell: true },
  api: boxProduct.getList,
  recycleApi: boxProduct.getRecycleList,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationColumnWidth: 160,
  recovery: { show: true, api: boxProduct.recoverys, auth: ['box:product:recovery'] },
  formOption: { width: '800px' },
  add: { show: true, api: boxProduct.save, auth: ['box:product:save'] },

  edit: {
    show: true,
    api: boxProduct.update,
    auth: ['box:product:update']
  },
  delete: {
    show: true,
    api: boxProduct.deletes, auth: ['box:product:delete'],
    realApi: boxProduct.realDeletes, realAuth: ['box:product:realDeletes']
  },
  beforeAdd: (form) => form.box_id = currentRow.value.id,
  beforeRequest: (params) => {
    params.box_id = currentRow.value.id
  },
});

const columns = reactive([
  {
    title: "产品ID",
    dataIndex: "product_id",
    formType: "input",
    width:90,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入ID"
    }
  },
  {
    title: "选择产品",
    dataIndex: "product_id",
    width:280,
    formType: "product-select",
    hide:true
  },
  {
    title: "产品名称",
    dataIndex: "product_name",
    width:280,
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入产品名称"
    },
    addDisplay: false,
    editDisplay: false,
    customField:currentRow.value.id
  },

  {
    title: "产品图片",
    dataIndex: "img_url",
    formType: "input",
    commonRules: {
      required: true,
      message: "请输入产品名称"
    },
    addDisplay: false,
    editDisplay: false,
  },
  {
    title: "选择等级",
    dataIndex: "grade_id",
    formType: "select",
    dict: { url: 'box/productProbability/list', props: { label: 'name', value: 'id' },      translation: true},
    commonRules: {
      required: true,
      message: "请输入盒子分类id"
    }
  },

  {
    title: "价格",
    dataIndex: "price",
    formType: "input",
    commonRules: {
      required: true,
      message: "请输入盒子价格"
    },
    addDisplay: false,
    editDisplay: false,
  },
  {
    title: "概率",
    dataIndex: "probability",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
  },

  {
    title: "权重",
    dataIndex: "weight",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
  },

  {
    title: "状态",
    dataIndex: "status",
    formType: "radio",
    search: true,
    commonRules: {
      required: true,
      message: "请输入的展示产品"
    },
    dict: {
      name: "data_show_status",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    },
    addDefaultValue: '1'
  },

])
defineExpose({ open })
</script>
<script> export default { name: 'box:product' } </script>